<template>
  <filePreview ref="filePreview" :visible="viewer.visible" :pics="viewer.pics" @close="viewer.visible = false" />
  <ProTable
    ref="fileRef"
    :request-auto="false"
    :pagination="false"
    :columns="fileData.columns"
    :init-param="fileData.initParam"
    :request-api="fileByForm"
  >
    <template #tableHeader>
      <GlobalButton :button-list="fileData.headButtonList"></GlobalButton>
    </template>

    <template #operation="{ row }">
      <GlobalButton :button-list="fileData.rowButtonList" :row-params="row"></GlobalButton>
    </template>
  </ProTable>

  <DialogForm
    :options="addFileForm.options"
    :title="addFileForm.title"
    :form-attrs="addFileForm.formAttrs"
    v-model:visible="addFileForm.visible"
    @get-model="(form: File.ReqUpload) => (addFileForm.form = form)"
    @submit-form="saveAddFileForm"
  >
    <template #formBottom>
      <div class="file ml100">
        <el-upload
          ref="uploadRef"
          :headers="fileObj.headers"
          :data="fileObj.uploadingData"
          action="http://mes.cnrecyc.com/api/base/file/upload"
          name="fileByMultipart"
          :auto-upload="false"
          :limit="1"
          :accept="fileObj.acceptSuffix"
          :before-upload="fileBeforeUpload"
          :on-success="onSuccess"
          :on-change="onChange"
          :file-list="fileObj.fileList"
          :on-exceed="onExceed"
        >
          <el-button size="small" type="primary"> <SvgIcon class="mr5 icon" name="svg-uploading"></SvgIcon>附件上传 </el-button>
        </el-upload>
      </div>
    </template>
  </DialogForm>
</template>
<script setup lang="ts" name="FileData">
import { ProTableInstance } from '../ProTable/interface';
import { useFileData } from './hooks/use-fileData';
import { fileByForm } from '$api/file';
import { File } from '@/api/interface/file';

export interface FileDataProps {
  formType: string;
  formId: number | '';
  errorMessage?: string;
  permissionCodeGather?: PermissionCodeGatherProp;
}

interface PermissionCodeGatherProp {
  download: string;
  delete: string;
  uploading: string;
}

const props = withDefaults(defineProps<FileDataProps>(), {
  formType: '',
  formId: ''
});

watch(
  () => props.formId,
  val => {
    if (val) {
      nextTick(() => {
        if (!props.formType || !props.formId) {
          return;
        }
        Object.assign(fileData.initParam, {
          formType: props.formType,
          formId: props.formId
        });
        fileRef.value?.search();
      });
    }
  }
);

const changePermission = () => {
  fileData.rowButtonList?.forEach(item => {
    if (item.label === '下载' || item.label === '预览') {
      item.permissionCode = props.permissionCodeGather?.download;
    } else if (item.label === '删除') {
      item.permissionCode = props.permissionCodeGather?.delete;
    }
  });

  fileData.headButtonList?.forEach(item => {
    if (item.label === '附件上传') {
      item.permissionCode = props.permissionCodeGather?.uploading;
    }
  });
};

const fileRef = ref<ProTableInstance>();
const uploadRef = ref();
const { fileData, addFileForm, fileObj, viewer, onChange, fileBeforeUpload, onSuccess, onExceed } = useFileData(fileRef, props);

const closeFormLoading = () => {
  setTimeout(() => {
    globalStore.setGlobalState('formLoading', false);
    globalStore.formLoading = false;
  }, 100);
};
/**
 * @description: 附件提交
 * @param {*} form
 * @return {*}
 */
const globalStore = useGlobalStore();
const saveAddFileForm = (form: any) => {
  const { fileName, fileSuffix, remark } = form;
  const { formType, formId } = props;
  if (!fileObj.value.fileList.length) {
    elMessage('请先点击文件上传上传文件', 'warning');
    closeFormLoading();

    return;
  }
  if (!formId || !formType) {
    elMessage(props.errorMessage, 'warning');
    closeFormLoading();
    return;
  }
  Object.assign(fileObj.value.uploadingData, {
    fileName: fileName + fileSuffix,
    remark: remark || '',
    formType,
    formId,
    fileSuffix
  });
  uploadRef.value.submit();
};

defineExpose({ changePermission });
</script>
